<template>
	<div
		style="padding-bottom: 50px"
		v-if="Object.keys(data.articleDetail).length"
	>
		<van-nav-bar title="词源详情" left-arrow @click-left="goBack" />
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div
				style="
					font-size: 22px;
					color: #222;
					font-weight: 700;
					text-align: center;
					margin: 10px 0;
				"
			>
				{{ data.articleDetail.title }}
			</div>
			<div
				style="
					border-top: 1px solid #ccc;
					border-bottom: 1px solid #ccc;
					padding: 10px 0;
				"
			>
				<span>{{ data.articleDetail.createTime }}</span>
				<span style="color: red; padding: 0 10px">{{
					data.articleDetail.etymology_type.title
				}}</span>
			</div>
			<img
				:src="'http://localhost:3000/' + data.articleDetail.cover"
				style="width: 100%; height: 300px; margin: 10px 0"
				alt=""
			/>
			<div style="width: 100%" v-html="data.articleDetail.content"></div>
		</div>
		<div
			style="
				width: 100%;
				margin: 10px auto;
				background-color: #fff;
				padding: 10px;
			"
		>
			<div style="font-size: 20px; color: #222; font-weight: 700">
				同类型推荐
			</div>
			<Waterfall
				:list="data.articleList"
				:breakpoints="{
					1200: { rowPerView: 3 },
					800: { rowPerView: 2 },
					500: { rowPerView: 2 },
				}"
			>
				<template #item="{ item }">
					<div class="water-container" @click="handleToDetail(item)">
						<LazyImg :url="'http://localhost:3000/' + item.cover" />
						<p class="water-title">{{ item.title }}</p>
					</div>
				</template>
			</Waterfall>
		</div>
	</div>
</template>

<script setup>
import { reactive, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import dayjs from "dayjs";

import {
	getEtymologyDetailById,
	getEtymologyByTypeAndKeyword,
} from "@/api/basic";

const route = useRoute();
const router = useRouter();
const data = reactive({
	articleDetail: [],
	articleList: [],
});
onMounted(() => {});

watch(
	() => route.fullPath,
	() => {
		handleGetArticleDetailById();
	}
);

const handleGetArticleDetailById = async () => {
	const res = await getEtymologyDetailById({ id: route.query.id });
	data.articleDetail = {
		...res.result,
		createTime: dayjs(res.result.createTime).format("YYYY-MM-DD"),
	};
	handleGetArticleList();
};
handleGetArticleDetailById();

const handleGetArticleList = async () => {
	const res = await getEtymologyByTypeAndKeyword({
		typeId: data.articleDetail.etymology_type.id,
	});
	data.articleList = res.result.list;
};

const goBack = () => {
	router.back();
};

const handleToDetail = item => {
	router.replace({
		path: "/etymologyDetail",
		query: {
			id: item.id,
		},
	});
};
</script>
<style scoped></style>
